<template>
	<view class="page">
		<view v-if="detail.img" class="img-box">
			<img :src="detail.img" alt="">
			<view class="title-nav">
				<text class="title">{{ detail.title }}</text>
				<text class="money">{{ detail.money }}积分</text>
			</view>
			<view class="info">
			<text class="inventory">库存：{{ detail.inventory || 0 }}</text>
				<text class="views">浏览量：{{ detail.views || 0 }}</text>
			</view>
		</view>
		<view class="content">
			<text class="title">物品信息</text>
			<rich-text class="desc" :nodes="detail.desc"></rich-text>
			<view class="btn">
				<button :disabled="detail.status != true" @click="buyProduct()">{{buttonVal}}</button>
			</view>
		</view>
	</view>
</template>

<script>
import { getProduct, buyProduct } from '@/api/mine'
	export default {
		data() {
			return {
				productId: null,
				detail: {}
			};
		},
		computed: {
			buttonVal({ detail }) {
				if (detail.status == true) {
					return '兑换'
				}
				return detail.status
			}
		},
		onLoad(options) {
			console.debug(options)
			this.productId = options.productId
			this.getProductDetail()
		},
		methods: {
			/**
			 * 获取商品详情
			 */
			getProductDetail() {
				const token = uni.getStorageSync('token')
				getProduct({ token, productId: this.productId }).then(res => {
					const { status, data } = res
					if (status == 200) {
						const img = this.domain + data.img
						let desc = ''
						if (data.desc) {
							const reg2 = new RegExp("&lt;", "gi");
          		const reg3 = new RegExp("&gt;", "gi");
							desc = data.desc.replace(reg2, `<`).replace(reg3, `>`)
						}
						this.detail = { ...data, ...{ img }, ...{ desc }}						
					}
				})
			},
			/**
			 * 兑换商品
			 */
			buyProduct() {
				const { productId, status } = this.detail
				if (status != true) {
					return
				}
				uni.showModal({
					title: '提示',
					content: '确认兑换该商品？',
					success: function (params) {
						const { cancel, confirm } = params
						if (confirm) {
							const token = uni.getStorageSync('token')
							buyProduct({ token, productId, number: 1 }).then(res => {
								const { msg } = res
								uni.showModal({
									title: '提示',
									content: msg,
									showCancel: false
								})
							})
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.page {
		width: 100vw;
		height: 100%;
		min-height: 100vh;
		padding: 10rpx;
		background: #eee;
	}
	.img-box {
		width: 100%;
		margin-bottom: 10rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background: #fff;
		img {
			width: 100%;
		}
		.title-nav {
			width: 98%;
			margin: 10rpx 0;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			.title {
				font-size: 28rpx;
				font-weight: 600;
				color: #222;
			}
			.money {
				font-size: 20rpx;
				color: #999;
			}
		}
		.info {
			width: 98%;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			.views,
			.inventory {
				font-size: 20rpx;
				color: #999;
			}
		}
	}

	.content {
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		background: #fff;
		.title {
			margin-bottom: 10rpx;
			font-size: 28rpx;
			color: #ffa500;
		}
		.desc {
			padding: 8rpx;
			line-height: 30rpx;
			font-size: 20rpx;
			color: #999;
		}
		.btn {
			width: 100%;
			display: flex;
			justify-content: center;
			button {
				width: 80%;
				height: 80rpx;
				line-height: 80rpx;
				margin: 20rpx 0;
				color: #fff;
				background: #E76625;
				&:disabled {
					background: #c1c1c1;
				}
			}
		}		
	}

</style>
